<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>演示HTML5新标签</title>
</head>
<body>
	<h3>input -- number</h3>
	<input type="number">
	<h3>input -- color</h3>
	<input type="color" class="color">
	<button onclick="console.log(document.querySelector('.color').value);">检查颜色值</button>
	<h3>input -- range</h3>
	<input type="range" min="1" max="10" class="range" value="1">
	<button onclick="console.log(document.querySelector('.range').value);">检查范围值</button>
	<h3>input -- date</h3>
	<input type="date" class="date">
	<button onclick="console.log(document.querySelector('.date').value);">检查选择的时间</button>
	<h3>input -- date Pickers[month  week   time  datetime-local]</h3>
	<input type="month">
	<input type="week">
	<input type="time">
	<input type="datetime-local">
	<h3>mark</h3>
	<p>Today we learn <mark>HTML5</mark> together!</p>
	<h3>progress</h3>
	<progress max="100" value="85"></progress>
	<h3>time</h3>
	<p>我在 <time datetime="2017-02-14">情人节</time> 有个约会。</p>
	<h3>ruby</h3>
	<ruby>漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt></ruby>
	<h3>wbr</h3>
	<p>如果想学习 AJAX，那么您必须熟悉 XML<wbr>Http<wbr>Request 对象。</p>
	<h3>canvas</h3>
	<canvas id="myCanvas"></canvas>
	<script>
		var canvas = document.querySelector("#myCanvas");
		var ctx = canvas.getContext("2d");
		ctx.fillStyle = "skyblue";
		ctx.fillRect(0,0,80,100);
	</script>
	<h3>command</h3>
	<command type="command">Click Me!</command>
	<h3>details</h3>
	<details>
		<summary>展开可以看到详情内容</summary>
		<p>什么详情内容都没有</p>
		<p>这只是一个演示</p>
		<p>这个标签浏览器支持度很低的</p>
	</details>
	<h3>detalist</h3>
	<input list="singer" placeholder="输入你喜爱的歌手" />
	<datalist id="singer">
	  	<option value="周杰伦">
	  	<option value="林俊杰">
	  	<option value="王力宏">
	</datalist>
	<h3>output</h3>
	<p>随机数：<output id="result"></output></p>
  	<input type="button" value="生成" onclick="run()">
  	<script>
  		function run(){
	        var resultElement = document.getElementById("result");
	        resultElement.value = Math.random();
	    }
  	</script>
</body>
</html>